<template>
    <div class="app-container">
        <div class="item" style="display: none">
            <h4>活跃度</h4>
            <nx-data-display :option="option"></nx-data-display>
        </div>
        <div class="item">
            <h4>昨日信息统计</h4>
            <nx-data-tabs :option="easyDataOption"></nx-data-tabs>
        </div>
        <div class="item">
            <h4>当月信息统计</h4>
            <nx-data-tabs :option="easyDataOption"></nx-data-tabs>
        </div>
        <div class="item">
            <h4>上月信息统计</h4>
            <nx-data-tabs :option="easyDataOption"></nx-data-tabs>
        </div>
        <div class="item" style="display: none">
            <h4>优秀员工展示</h4>
            <nx-data-card :option="easyDataOption0"></nx-data-card>
        </div>
        <div class="item">
            <h4>今日呼叫情况</h4>
            <nx-data-icons :option="todayCall"></nx-data-icons>
        </div>
        <div class="item">
            <h4>今日联系情况</h4>
            <nx-data-icons :option="todayContact"></nx-data-icons>
        </div>
        <div class="item">
            <h4>我的今日统计</h4>
            <nx-data-icons :option="todayCall"></nx-data-icons>
        </div>
        <div class="item" style="display: none">
            <h4>简易展示</h4>
            <nx-data-icons :option="easyDataOption2"></nx-data-icons>
        </div>
    </div>
</template>

<script>
    import nxDataDisplay from '@/components/nx-data/nx-data-display/nx-data-display'
    import nxDataCard from '@/components/nx-data/nx-data-card/nx-data-card'
    import nxDataTabs from '@/components/nx-data/nx-data-tabs/nx-data-tabs'
    import nxDataIcons from '@/components/nx-data/nx-data-icons/nx-data-icons'
    export default {
        name: 'report',
        components: {
            nxDataDisplay,
            nxDataCard,
            nxDataTabs,
            nxDataIcons,
        },
        data() {
            return {
                // 活跃度
                option: {
                    span: 8,
                    color: '#15A0FF',
                    data: [
                        {
                            count: 1000,
                            title: '日活跃数'
                        },
                        {
                            count: 3000,
                            title: '月活跃数'
                        },
                        {
                            count: 20000,
                            title: '年活跃数'
                        }
                    ]
                },
                // 统计展示
                easyDataOption: {
                    span: 6,
                    data: [
                        {
                            title: '分类统计',
                            subtitle: '实时',
                            count: 7993,
                            allcount: 10222,
                            text: '当前分类总记录数',
                            color: 'rgb(49, 180, 141)',
                            key: '类'
                        },
                        {
                            title: '附件统计',
                            subtitle: '实时',
                            count: 3112,
                            allcount: 10222,
                            text: '当前上传的附件数',
                            color: 'rgb(56, 161, 242)',
                            key: '附'
                        },
                        {
                            title: '文章统计',
                            subtitle: '实时',
                            count: 908,
                            allcount: 10222,
                            text: '评论次数',
                            color: 'rgb(117, 56, 199)',
                            key: '评'
                        },
                        {
                            title: '新闻统计',
                            subtitle: '实时',
                            count: 908,
                            allcount: 10222,
                            text: '评论次数',
                            color: 'rgb(59, 103, 164)',
                            key: '新'
                        }
                    ]
                },
                // 优秀员工展示
                easyDataOption0: {
                    span: 6,
                    borderColor: '#fff',
                    data: [
                        {
                            name: '姓名1',
                            src: 'static/img/mock/card/card-1.jpg',
                            text: '介绍1'
                        },
                        {
                            name: '姓名2',
                            src: 'static/img/mock/card/card-2.jpg',
                            text: '介绍2'
                        },
                        {
                            name: '姓名3',
                            src: 'static/img/mock/card/card-3.jpg',
                            text: '介绍3'
                        },
                        {
                            name: '姓名4',
                            src: 'static/img/mock/card/card-4.jpg',
                            text: '介绍4'
                        }
                    ]
                },
                // 带数字的展示
                todayCall: {
                    color: 'rgb(63, 161, 255)',
                    span: 4,
                    data: [
                        {
                            title: '今日注册',
                            count: 12678,
                            icon: 'fa fa-times'
                        },
                        {
                            title: '今日登录',
                            count: 22139,
                            icon: 'fa fa-login'
                        },
                        {
                            title: '今日订阅',
                            count: 35623,
                            icon: 'icon-jiaoseguanli'
                        },
                        {
                            title: '今日评论',
                            count: 16826,
                            icon: 'icon-caidanguanli'
                        },
                        {
                            title: '今日评论',
                            count: 16826,
                            icon: 'icon-caidanguanli'
                        },
                        {
                            title: '今日评论',
                            count: 16826,
                            icon: 'icon-caidanguanli'
                        }
                    ]
                },
                // 简易展示
                easyDataOption2: {
                    color: 'rgb(63, 161, 255)',
                    span: 4,
                    discount: true,
                    data: [
                        {
                            title: '错误日志',
                            count: 12678,
                            icon: 'icon-cuowu'
                        },
                        {
                            title: '数据展示',
                            count: 12678,
                            icon: 'icon-shujuzhanshi2'
                        },
                        {
                            title: '权限管理',
                            count: 12678,
                            icon: 'icon-jiaoseguanli'
                        },
                        {
                            title: '菜单管理',
                            count: 12678,
                            icon: 'icon-caidanguanli'
                        },
                        {
                            title: '权限测试',
                            count: 12678,
                            icon: 'icon-caidanguanli'
                        },
                        {
                            title: '错误页面',
                            count: 12678,
                            icon: 'icon-caidanguanli'
                        }
                    ]
                }
            }
        },
        created() {},
        watch: {},
        mounted() {},
        computed: {}
    }
</script>

<style scoped>
    .item {
        margin-bottom: 16px;
    }
</style>
<style lang ="scss">
    @import '../../../../common/scss/data-card.scss';
    @import '../../../../common/scss/data-display.scss';
    @import '../../../../common/scss/data-icons.scss';
    @import '../../../../common/scss/data-tabs.scss';
</style>
